<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">  
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>智慧远东-ECT Smart</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
	</head>

<body>
<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;" id="bodyDiv">  
<img src="img/pic2.jpg" position:absolute; height="100%" width="100%" style="left:0; top:0;"> 
</div>
		<div class="container-fluid">
			<div id="topbar">
				<div class="pull-left left"><span class="glyphicon glyphicon-list"></span></div>
				<a href="index.html"><img src="img/apple-touch-icon.png" /></a>
				<div class="pull-right right"><span class="glyphicon glyphicon-align-justify"></span></div>
			</div>
			<div class="row">
				<div id="customerEntry" class="col-xs-12 col-sm-8 col-md-4 sideentry">
					<div class="">
						<div class="title">
							<span class="etitle">员工入口</span>
							<span id ="leftSpan" class="glyphicon glyphicon-remove pull-right close-left"></span>
						</div>
						<div class="content">
                             
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div id="employeeEntry" class="col-xs-12 col-sm-8 col-md-4 sideentry">
					<div class="">
						<div class="title">
							<span  class="etitle">贵宾区域-斯莱德</span>
							<span id="rightSpan" class="glyphicon glyphicon-remove pull-left close-right"></span>
						</div>
						<div class="content">

						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>

		<script>
			$(function(){
				$("#customerEntry").hide();
				$("#employeeEntry").hide();
			});
			var winHeight = $(window).height();   //获取当前页面高度
			$(window).resize(function(){
			   var thisHeight=$(this).height();
			    if(winHeight - thisHeight >50){
			         //当软键盘弹出，在这里面操作
			       $("#bodyDiv").css("height", "170%");//通过设置CSS属性来设置元素的高
			    }else{
			        //当软键盘收起，在此处操作
			       $("#bodyDiv").css("height", "100%");//通过设置CSS属性来设置元素的高
			    }
			});
			$(document.body).css({
		   		"overflow-x":"hidden",
		   		"overflow-y":"hidden"
			});
			//点击左边展开按钮
			$(".left").click(function() {
				$("#customerEntry").css("margin-left","-500px");
				$("#customerEntry").css("left","0");
				$("#customerEntry").toggle();
				$("#customerEntry").animate({
                     left: "500"
           			 },200,function(){
              	 });
			if($("#employeeEntry").is(":visible")) {
				$("#employeeEntry").hide();
			}
			});
			//点击左边关闭按钮
			$(".close-left").click(function() {
				$("#customerEntry").animate({
                     left: "0"
           			 },200,function(){
		           		$("#customerEntry").css("margin-left","-500px");
						$("#customerEntry").css("left","0");
						$("#customerEntry").toggle();
              	 });
			if($("#employeeEntry").is(":visible")) {
				$("#employeeEntry").hide();
			}
			});
			// 点击右边按钮展开
			$(".right").click(function() {
				$("#employeeEntry").css("margin-right","-500px");
				$("#employeeEntry").css("right","0");
				$("#employeeEntry").toggle();
				$("#employeeEntry").animate({
                     right: "500"
           			 },200,function(){
              	 });
				if($("#customerEntry").is(":visible")) {
					$("#customerEntry").hide();
				}
			});
			//点击右边按钮关闭
			$(".close-right").click(function() {
				$("#employeeEntry").animate({
                     right: "0"
           			 },200,function(){
		           		$("#employeeEntry").css("margin-right","-500px");
						$("#employeeEntry").css("right","0");
						$("#employeeEntry").toggle();
              	 });
				if($("#customerEntry").is(":visible")) {
					$("#customerEntry").hide();
				}
			});
			
		</script>
	
	</body>

</html>